<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>public/css/bootstrap-datetimepicker.min.css" />
<style>

    #number_block{
        margin: 0 auto;
        width: 86%;
    }
    .search_home{
        position: absolute;
        top: 96px;
    }
    .statistic_home{
        position: absolute;
        top: 96px;
        float:right;
    }
    #frm-event{
        background-color: rgba(156, 150, 155, 0.69);
        border-radius: 15px;
        padding: 20px;
        color: white;
        height: 500px;
    }
    .counterBlock ,.counterSpacer{
        font-size: 36px;
        background: #000;
        border-bottom: 4px solid #f60;
        color: #FFF;
        font-weight: 500;
        height: 54px;
        margin-right: 2px;
        float: left;
        overflow: hidden;
        position: relative;
        vertical-align: top;
        width: 10%;
        text-align: center;
    }
    #text p{
        color: white;
    }


    .counterWrapper {
        position: absolute;
        top: 2px;
        left: 6px;
    }
    .counterWrapper>div {
        /*        padding: 7px 7px 0 7px;*/
        padding: 7px 0px;
    }
    /*    .hpCounter .counter.medium {
            font-size: 36px;
        }*/
    .hpCounter .text {
        color: #FFF;
        text-shadow: 0 1px 0 rgba(0,0,0,0.8);
        font-size: 14px;
    }

    .hpCounter .counter .counterSpacer {
        padding: 10px 5px;
        height: 34px;
        top: 0;
        width: 8px;
    }
    #home_image{
        height: 650px;
    }

    #text{
        width: 100%;
        float: left;
    }
    /* some CSS here */
        
    @media (min-width: 1200px) {
       
    }
    @media (max-width: 979px) {
     #counter_statistic{
            margin-bottom:84px;
        }
      #home_image{
        height: 700px;
        }
        .navbar-fixed-top{
            margin-bottom: 0px;
        }
    }
    @media (min-width: 980px) {
       
    }
   
</style>
<script src="<?php echo base_url(); ?>public/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //datetime picker
        currentTime = new Date().toLocaleTimeString();
        var dt = new Date();
        currentDay = dt.getDate()+ "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
        $("#start_time").val(currentDay +" "+currentTime);
        $('#datetimepicker2').datetimepicker({
            language: 'en',
            format: 'dd/MM/yyyy hh:mm:ss',
            pick12HourFormat: true
        });
        $('#datetimepicker1').datetimepicker({
            language: 'en',
            format: 'dd/MM/yyyy hh:mm:ss',
            pick12HourFormat: true
        });
        
        //placeholder manual for desciption area
        $isPress = false;
        $("#textarea_description").focus(function(){
            $(this).val('');
        });
        $("#textarea_description").keydown(function(){
            $isPress = true;
        });
        $("#textarea_description").blur(function(){
            if($isPress == false)
                $(this).val('Yêu cầu của bạn hay bất cứ thông tin nào cần thiết');
        });
        //end placeholder manual for desciption area
        
        //set value for duration
        $("#duration_time").blur(function(){
            number = $(this).val();
            time = $("#duration_option").val();
            $("#duration").val(number+time);
        });
        $("#duration_option").change(function(){
            number = $("#duration_time").val();
            time = $(this).val();
            $("#duration").val(number+time);
        });
        //end placeholder manual for desciption area
        
        
        
        //validate form
        $("#frm-event").validate({    
            // Specify the validation rules
            rules: {
                event_name: {required:true, 
                    minlength: 10    
                },
                place: "required",
                duration_time: {
                    required: true,
                    number: true
                }
            },
        
            // Specify the validation error messages
            messages: {
                event_name: "Tên sự kiện phải lớn hơn 10 kí tự",
                place: "Vui lòng nhập địa điểm",
                duration_time: "Vui lòng nhập số"
               
                //                email: "Please enter a valid email address",
                //                agree: "Please accept our policy"
            },
        
            tooltip_options: {
                event_name: {trigger:'focus'},
                place: {trigger:'focus'}
            },
            submitHandler: function(form) {
                url="<?php echo base_url() . '/index.php/event/create_process'; ?>";
                sex =$("#sex").val();
                age_range =$("#age_range").val();
                age_range =$("#age_range").val();
                event_name =$("#event_name").val();
                des =$("#textarea_description").val();
                start_time =$("#start_time").val();
                duration =$("#duration").val();
                place =$("#place").val();
                data ={"title": event_name, 
                    "description": des,
                    "place": place,
                    "start_time": start_time,
                    "duration": duration,
                    "sex": duration
                };

                $.post( url, data, function(resp) {
                    alert(resp.rs);
                }, "json");
            }
        });
        //end validate form                
    });
</script>


<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="<?php echo base_url() . "public/img/home-1.jpg" ?>" alt="" class="img-responsive" id="home_image">
            <div class="container " >
                <div class="container marketing row span12 search_home ">
                    <div class="span4" id="counter_statistic">
                        <div class="span4">
                            <div id="number_block" style="" >
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                        
                                <div class="counterSpacer">.</div>
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                        
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                        
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                        
                                <div class="counterSpacer">.</div>

                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                           
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>                                           
                                <span class="counterBlock">
                                    <span class="jsCounterWrapper counterWrapper" style="top: 2px;">
                                        <div>0</div>
                                    </span>
                                </span>  
                                <div id="text"><p >Sự kện đã được tạo trên Together!</p></div>
                            </div>

                        </div>
                    </div>
                    <div class="container theme-showcase  span7" role="main">
<!--                         class="form-horizontal"-->
                        <form id="frm-event" type="actionForm" method="POST" action="#" novalidate="novalidate">
                            <div class="control-group">
                                <label class="control-label" for="selectbasic">Bạn cần một bạn là</label>
                                <div class="controls">
                                    <select id="sex" name="sex" class="input-xlarge span3">
                                        <option value="-1">Sao cũng được</option>
                                        <option value="1">Nam</option>
                                        <option value="0">Nữ</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="selectbasic">Độ tuổi</label>
                                <div class="controls">
                                    <select id="age_range" name="age_range" class="input-xlarge span3">
                                        <option value="18-25">18-25</option>
                                        <option value="26-35">26-35</option>
                                        <option value="36-40">35-40</option>
                                        <option value=">40">>40</option>
                                        <option value="18"><18</option>
                                    </select>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputPassword">Cùng tham gia</label>
                                <div class="controls">
                                    <input class="span6" name="event_name" type="text" id="event_name" placeholder="Đi coi phim, đi cà phê, đi công viên, hẹn hò, blabla.." >
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="textarea">Từ lúc</label>
                                <div id="datetimepicker1" class="controls">
                                    <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" name="start_time" id="start_time"></input>
                                    <span class="add-on">
                                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                    <!--                    <label class="control-label" for="textarea">Kéo dài trong</label>-->
                                    <!--                    <input type="text"></input>-->

                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="textarea">Đến lúc</label>
                                <div id="datetimepicker2" class="controls">
                                    <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text" name="start_time" id="start_time"></input>
                                    <span class="add-on">
                                        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                                    </span>
                                    <!--                    <label class="control-label" for="textarea">Kéo dài trong</label>-->
                                    <!--                    <input type="text"></input>-->

                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputPassword">Tại địa điểm</label>
                                <div class="controls">
                                    <input class="span6" name="event_place" type="text" id="event_place" placeholder="Rạp chiếu phim Nguyễn Trãi, công viên hoặc nhà riêng. :3" >
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <button type="submit" class="btn btn-primary btn-large btn-block" id="btn-lg" name="btn-lg"  style="width: 100%;float: left; background: #20B2AA;">Tìm kiếm</button>
                                    <!--                                <button class="btn btn-primary btn-lg btn-block" id="btn-rg" name="btn-rg" type="button" style="width: 105px;float: left;margin-left: 10px;margin-top: 0px;background: #808080;">Lưu nháp</button>-->
                                </div>
                            </div>

                        </form>
                    </div>

                </div>
            </div>
        </div><!--item active-->

    </div>

    <!--      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>-->
</div><!-- /.carousel -->



<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140">
            <h2>Valentine sắp đến rồi.</h2>
            <p>Và bạn chưa có gấu</p>
            <p><a class="btn" href="#">Đọc thêm ...</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140">
            <h2>Cuối tuần lại tới</h2>
            <p>Không lẽ lại ở nhà luyện phim là online chém gióa :(</p>
            <p><a class="btn" href="#">Đọc thêm ...</a></p>
        </div><!-- /.span4 -->
        <div class="span4">
            <img class="img-circle" data-src="holder.js/140x140">
            <h2>FA đi party</h2>
            <p>Người ta có cặp, hổng lẽ là định mệnh trêu mình  :'(</p>
            <p><a class="btn" href="#">Đọc thêm ...</a></p>
        </div><!-- /.span4 -->
    </div><!-- /.row -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
        <h2 class="featurette-heading">Tìm bạn để đi chơi<span class="muted">It'll blow your mind.</span></h2>
        <p class="lead">Together sẽ giúp bạn,.....cần soạn riêng</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>

    <hr class="featurette-divider">

    <div class="featurette">
        <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
        <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->


    <!-- FOOTER -->
    <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; 2013 together, Đang chờ xin giấy phép; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
    </footer>

</div><!-- /.container -->


